.btn-3 {
    color: #d3f169;
}

.btn-3:hover {
    -webkit-animation: sawtooth 0.35s infinite linear;
    animation: sawtooth 0.35s infinite linear;
    background: -webkit-linear-gradient(45deg, #d3f169 0.5em, transparent 0.5em) 0 0/1em 1em, -webkit-linear-gradient(135deg, #d3f169 0.5em, transparent 0.5em) 0 0/1em 1em;
    background: linear-gradient(45deg, #d3f169 0.5em, transparent 0.5em) 0 0/1em 1em, linear-gradient(-45deg, #d3f169 0.5em, transparent 0.5em) 0 0/1em 1em;
    color: #8769f1;
}

@-webkit-keyframes sawtooth {
    100% {
        background-position: 1em 0;
    }
}

@keyframes sawtooth {
    100% {
        background-position: 1em 0;
    }
}

.btn-4 {
    color: #eea163;
}

.btn-4:hover {
    -webkit-animation: zigzag 1s linear infinite;
    animation: zigzag 1s linear infinite;
    background: -webkit-linear-gradient(315deg, rgba(238, 161, 99, 0.25) 0.25em, transparent 0.25em) -0.5em 0, -webkit-linear-gradient(225deg, rgba(238, 161, 99, 0.25) 0.25em, transparent 0.25em) -0.5em 0, -webkit-linear-gradient(135deg, rgba(238, 161, 99, 0.25) 0.25em, transparent 0.25em) 0 0, -webkit-linear-gradient(45deg, rgba(238, 161, 99, 0.25) 0.25em, transparent 0.25em) 0 0;
    background: linear-gradient(135deg, rgba(238, 161, 99, 0.25) 0.25em, transparent 0.25em) -0.5em 0, linear-gradient(225deg, rgba(238, 161, 99, 0.25) 0.25em, transparent 0.25em) -0.5em 0, linear-gradient(315deg, rgba(238, 161, 99, 0.25) 0.25em, transparent 0.25em) 0 0, linear-gradient(45deg, rgba(238, 161, 99, 0.25) 0.25em, transparent 0.25em) 0 0;
    background-size: 0.75em 0.75em;
    color: #63b0ee;
}

@-webkit-keyframes zigzag {
    100% {
        background-position: 1em 0, 1em 0, -0.75em 0, -0.75em 0;
    }
}

@keyframes zigzag {
    100% {
        background-position: 1em 0, 1em 0, -0.75em 0, -0.75em 0;
    }
}

.btn-6 {
    color: #f9879b;

}

.btn-6:hover {
    -webkit-animation: pulse 1s ease-in infinite;
    animation: pulse 1s ease-in infinite;
    background: -webkit-radial-gradient(circle, rgba(249, 135, 155, 0.25) 43%, rgba(0, 0, 0, 0) 50%) 0 0/1em 1em, -webkit-radial-gradient(circle, rgba(249, 135, 155, 0.25) 43%, rgba(0, 0, 0, 0) 50%) 0.5em 0.5em/2em 2em;
    background: radial-gradient(circle, rgba(249, 135, 155, 0.25) 43%, rgba(0, 0, 0, 0) 50%) 0 0/1em 1em, radial-gradient(circle, rgba(249, 135, 155, 0.25) 43%, rgba(0, 0, 0, 0) 50%) 0.5em 0.5em/2em 2em;
    color: #0bdcb7;

}

@-webkit-keyframes pulse {
    50% {
        background-position: 0.66em 0.66em, -0.33em -0.33em;
    }
    100% {
        background-size: 2em 2em, 1em 1em;
        background-position: -1.5em -1.5em, -1em -1em;
    }
}

@keyframes pulse {
    50% {
        background-position: 0.66em 0.66em, -0.33em -0.33em;
    }
    100% {
        background-size: 2em 2em, 1em 1em;
        background-position: -1.5em -1.5em, -1em -1em;
    }
}
